<template>
	<div :id="getRandomId()" class="upload-container">
		<UploadItem
			v-for="(item, index) in maxCount"
			:key="index"
			:ref="`uploadItem${index}`"
			:bounds="bounds"
			:fileSize="fileSize"
			:index="index"
			:platform.sync="platform"
			:uploadAPI="uploadAPI"
			:showText="showText"
			:size="size"
			:upload-file-type="uploadFileType"
			@deleteUpoladItem="handleDeleteUpload"
			@startUpoladItem="handleStartUpload"
			@upoladItemDefeat="handleUploadDefeat"
			@upoladItemSucess="handleUploadSuccess"
		/>
	</div>
</template>

<script>
import Sortable from 'sortablejs'
import UploadItem from '@/components/UploadItem'

export default {
	name: 'Upload',
	components: {
		UploadItem
	},
	props: {
		// 上传按钮的数量
		maxCount: {
			type: Number,
			default: 0
		},
		uploadAPI: {
			type: Function,
			default: () => {}
		},
		// 上传的文件 image/video
		uploadFileType: {
			type: String,
			default: 'image'
		},
		// 上传按钮的size
		size: {
			type: String,
			default: 'medium'
		},
		// 上传列表关联的数据
		fileList: {
			type: [Array, String],
			default: function() {
				return []
			}
		},
		// 上传状态当前组件维护了一套上传列表
		isUpload: {
			type: Boolean,
			default: false
		},
		fileSize: {
			type: [Number, String],
			default: () => 0
		},
		// 上传的平台
		platform: {
			type: String,
			required: true
		},
		bounds: {
			type: Object,
			default: function() {
				return {
					width: 0,
					height: 0
				}
			}
		}
	},
	data() {
		return {
			randomId: '',
			showText: true,
			uploadList: []
		}
	},
	watch: {
		fileList: {
			handler(newList) {
				console.error(newList)
				this.setFileList(newList)
			},
			deep: true
		},
		maxCount: {
			handler(val) {
				// console.log(val, 'val')
			},
			immediate: true,
			deep: true
		}
	},
	mounted() {
		// 添加拖动
		this.createSortable(this.randomId)
		this.setFileList(this.fileList)
	},
	methods: {
		createSortable(elementId) {
			const that = this
			const element = document.getElementById(elementId)
			if (element) {
				new Sortable(element, {
					onUpdate: function(event) {
						// 交换数据 为了维护数据在数组内的顺序
						const temp = that.fileList[event.newIndex]
						that.fileList[event.newIndex] =
							that.fileList[event.oldIndex]
						that.fileList[event.oldIndex] = temp
					},
					animation: 150
				})
			}
		},
		getFileList() {
			this.fileList = []
			for (let i = 0; i < this.maxCount; i++) {
				const item = this.$refs['uploadItem' + i]
				if (!item) {
					return
				}
				this.fileList.push(item.getFile())
			}
			return this.fileList
		},
		setFileList(fileList) {
			if (!fileList) {
				return
			}
			const { length } = fileList
			this.fileList = fileList
			for (let i = 0; i < length; i++) {
				const item = this.$refs['uploadItem' + i][0]
				const curFile = fileList[i]
				if (curFile === null) {
					continue
				}
				if (!item) {
					return
				}
				if (this.limitImg && this.limitImg[i]) {
					this.setMustUpload(i, true)
				}

				item.setFile(curFile, this.uploadFileType)
			}
		},
		clearFileList() {
			for (let i = 0; i < this.maxCount; i++) {
				const item = this.$refs['uploadItem' + i][0]
				if (!item) {
					return
				}
				item.clearFile()
			}
		},
		getRandomId() {
			this.randomId = 'uploadList' + new Date().getTime()
			return this.randomId
		},
		handleStartUpload({ index, file, id }) {
			if (!this.uploadList[id]) {
				this.uploadList.push(id)
				this.$emit('update:isUpload', true)

				// 限制图片的时候， 第一张第二张必传
				this.setMustUpload(index, false)
			}
		},
		handleUploadSuccess({ index, file, id }) {
			this.fileList[index] = file
			this.deleteItemFormUploadQueue(id)
			this.setMustUpload(index, true)
		},
		handleUploadDefeat({ id }) {
			this.deleteItemFormUploadQueue(id)
		},
		handleDeleteUpload({ index, file, id }) {
			// this.fileList[index] = null
			this.fileList.splice(index, 1)
			this.setMustUpload(index, false)
		},
		deleteItemFormUploadQueue(id) {
			const idIndex = this.uploadList.indexOf(id)
			this.uploadList.splice(idIndex, 1)
			if (this.uploadList.length <= 0) {
				this.$emit('update:fileList', this.fileList)
				this.$emit('update:isUpload', false)
				// 限制图片的时候， 第一张第二张必传
				this.setMustUpload(idIndex, false)
			}
		},

		setMustUpload(index, status) {
			this.$emit('setMustUpload', {
				index,
				status
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.upload-container {
	display: flex;
	flex-direction: row;
	// justify-content: space-between;
	flex-wrap: wrap;
	.upload-container {
		margin: 0 15px;
	}
}
</style>
